<template>
  <div>
    <div class="main">
      <van-field label="使用金额" v-model="form.Price" name="Price" required>
      </van-field>
      <van-field
        readonly
        class="input_text"
        name="calendar"
        v-model="form.Year"
        label="年度"
        placeholder="请选择"
        @click="handleShow"
        required
      >
      </van-field>
      <van-field
        readonly
        type="textarea"
        autosize
        rows="1"
        class="input_text"
        name="form.PlanName"
        v-model="form.PlanName"
        label="费用计划"
        placeholder="请选择"
        @click="planNameConfirm"
        v-if="paramsList.length > 0"
      >
      </van-field>

      <van-field
        label="实际使用费用内容"
        rows="3"
        autosize
        type="textarea"
        v-model="form.Content"
        required
      >
      </van-field>

      <!-- <van-field label="证书附件" v-model="form.Attachs2" name="Attachs2">
      </van-field> -->

      <FileUpload
        @CallBack="_fileUploadCb"
        :attachs="form.Attachs"
        :labelName="'发票或合同'"
      />

      <div class="btn_submit">
        <van-button block type="info" @click="submit"> 提交 </van-button>
      </div>
    </div>

    <van-dialog
      v-model="showDatetime"
      v-if="showDatetime"
      title="请选择年度"
      show-cancel-button
      :showConfirmButton="false"
      :showCancelButton="false"
      :closeOnClickOverlay="true"
    >
      <van-form>
        <van-field class="input_text" name="radio" label="">
          <template #input>
            <van-radio-group
              v-model="form.Year"
              @change="radioChange"
              direction="horizontal"
            >
              <template v-for="(item, index) in yearList" >
                <van-radio :name="item" :key="index" class="mt-10 mr-30 pr-30" style="width:100px">{{ item }}</van-radio>
              </template>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px"></div>
      </van-form>
    </van-dialog>

     <van-popup
      v-model="showPopup"
      v-if="showPopup"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title">请选择费用计划</div>
      <div class="popup-content">
        <van-list style="height:200px">
          <van-cell>
            <van-field class="input_text" name="radio" label="">
              <template #input>
                <van-radio-group
                  v-model="form.PlanCode"
                  @change="planNameChange"
                  direction="horizontal"
                >
                  <template v-for="(item, index) in paramsList">
                    <van-radio :name="item.Code" :key="index">{{
                      item.Content
                    }}</van-radio>
                  </template>
                </van-radio-group>
              </template>
            </van-field>
          </van-cell>
        </van-list>
      </div>
    </van-popup>

    <!-- <van-dialog
      v-model="showPopup"
      v-if="showPopup"
      title="请选择费用计划"
      show-cancel-button
      :showConfirmButton="false"
      :showCancelButton="false"
      :closeOnClickOverlay="true"
    >
      <van-form>
        <van-list style="height:200px">
          <van-cell>
            <van-field class="input_text" name="radio" label="">
              <template #input>
                <van-radio-group
                  v-model="form.PlanCode"
                  @change="planNameChange"
                  direction="horizontal"
                >
                  <template v-for="(item, index) in paramsList">
                    <van-radio :name="item.Code" :key="index">{{
                      item.Content
                    }}</van-radio>
                  </template>
                </van-radio-group>
              </template>
            </van-field>
          </van-cell>
        </van-list>

        <div style="margin: 16px"></div>
      </van-form>
    </van-dialog> -->
  </div>
</template>

<script>
import {
  initEntity,
  costPlanAddSubmit,
  GetDetail,
  CostPlanByYear,
} from "@/api/SiteSafeCost";
import { uploadAttach } from "@/api/common";
import { mapGetters } from "vuex";
import FileUpload from "@/components/Attach/FileUpload";

export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      id: this.$route.query.id,
      radio: "1",
      value: "",
      showDatetime: false,
      yearList: [],
      distList: {},
      form: {},
      paramsList: [],
      showPopup: false,
      filePopup: false,
    };
  },

  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },

  created() {
    if (this.$route.query.id != null) {
      (this.id = this.$route.query.id), this.getDetail();
    }

    const nowDate = new Date();
    var year = nowDate.getFullYear();
    var years = [];

    for (var index = 10; index > 0; index--) {
      var curyear = year - index;
      console.log("curyear -", curyear);
      years.push(curyear.toString());
    }

    for (var index = 0; index < 10; index++) {
      var curyear = year + index;
      console.log("curyear +", curyear);
      years.push(curyear.toString());
    }

    this.yearList = years;
    // ["2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024"];

    console.log("id", this.$route.query.id);

    //this.getDistList();
  },
  activated() {
    // if (this.$route.params.certFile) {
    // 	this.fileList.push({
    // 		AttCode: this.$route.params.certFile.AttCode,
    // 		AttExt: this.$route.params.certFile.AttExt,
    // 		AttName: this.$route.params.certFile.AttName,
    // 	})
    // }
    //将该页面的id和新获取的id进行比对，如果不一致，说明页面应该进行数据刷新
    //重新请求数据
    // if (this.$route.params.userlist) {
    //   const userlist = this.$route.params.userlist;
    //   let EquManagerChnName = [];
    //   let EquManagerUserName = [];
    //   userlist.forEach((item) => {
    //     EquManagerChnName.push(item.name);
    //     EquManagerUserName.push(item.code);
    //   });
    //   this.form.EquManagerChnName = EquManagerChnName.join(",");
    //   this.form.EquManagerUserName = EquManagerUserName.join(",");
    // }
  },
  methods: {
    _fileUploadCb(attachs) {
      this.form.Attachs = attachs;
    },

    getDistList() {
      getDistList({ parentId: "MyList" }).then((res) => {
        this.distList = res.data;
      });
    },
    getDetail(certId) {
      let params = { id: this.id };

      if (this.id == 0) {
        initEntity(params).then((res) => {
          // res.data.PublishDate = getTime(res.data.PublishDate)
          // res.data.ReviewDate = getTime(res.data.ReviewDate)
          // res.data.NextReviewDate = getTime(res.data.NextReviewDate)
          // if (res.data.Attachs) {
          //   let Attachs = res.data.Attachs.split(";");
          //   console.log(Attachs, "Attachs");
          //   res.data.Attachs = JSON.parse(res.data.Attachs);
          // } else {
          //   res.data.Attachs = [];
          // }
          this.form = res.data;
          this.getCostPlanByYear();
        });
      } else {
        GetDetail(params).then((res) => {
          // res.data.PublishDate = getTime(res.data.PublishDate)
          // res.data.ReviewDate = getTime(res.data.ReviewDate)
          // res.data.NextReviewDate = getTime(res.data.NextReviewDate)

          // if (res.data.Attachs) {
          //   let Attachs = res.data.Attachs.split(";");
          //   console.log(Attachs, "Attachs");
          //   res.data.Attachs = JSON.parse(res.data.Attachs);
          // } else {
          //   res.data.Attachs = [];
          // }
          this.form = res.data;
          this.getCostPlanByYear();
        });
      }
    },

    getCostPlanByYear() {
      let params = { year: this.form.Year };

      CostPlanByYear(params).then((res) => {
        this.paramsList = res.data;

        console.log("this.paramsList", this.paramsList);
      });
    },

    submit() {
      if (!this.form.Price) {
        return this.$toast("请输入使用金额");
      }

      if (!this.form.Year) {
        return this.$toast("请选择年度");
      }

      if (!this.form.Content) {
        return this.$toast("请输入实际使用费用内容");
      }

      //   id	0
      // CompanyCode	00001
      // Code	SSR0000120210300004
      // PlanCode	db0fe33d-6761-403e-b6ae-c81900d8a0ee
      // Price	125
      // Year	2021
      // CostDate	2021-03-22 19:59:57
      // Content	2580
      // Attachs	[{"AttCode":"CA21032200001","AttExt":".pdf","AttName":"安全生产目标及方案管理制度"}]

      // if(this.form){
      let params = {
        id: this.form.ID,
        CompanyCode: this.CompanyCode,
        Code: this.form.Code,
        PlanCode: this.form.PlanCode,
        Price: this.form.Price,
        Year: this.form.Year,
        CostDate: this.form.CostDate,
        Content: this.form.Content,
        Attachs: this.form.Attachs,
      };

      costPlanAddSubmit(params).then((res) => {
        if (this.id == 0) {
          this.$toast.success("新增成功");
        } else {
          this.$toast.success("保存成功");
        }

        this.form = {
          ID: 0,
        };
        this.$router.go(-1);
        // setTimeout(() => {
        //   // this.$router.push("/Site_Appointment");
        //   history.go(-1);
        // }, 500);
      });
    },

    handleShow() {
      this.showDatetime = true;
    },

    planNameConfirm() {
      //   console.log("date", date);
      //   const dateTime = formatDate(date);
      //   this.form.CheckDate = getDate(dateTime);
      this.showPopup = true;
    },

    planNameChange(names) {
      this.form.PlanCode = names;

      for (let index = 0; index < this.paramsList.length; index++) {
        const element = this.paramsList[index];
        if (names == element.Code) {
          this.form.PlanName = element.Content;
        }
      }

      this.showPopup = false;
    },

    onConfirm(date) {
      console.log("date", date);
      //   const dateTime = formatDate(date);
      //   this.form.CheckDate = getDate(dateTime);
      this.showDatetime = false;
    },

    radioChange(names) {
      this.form.Year = names;
      this.showDatetime = false;

      this.getCostPlanByYear();
    },
  },
};
</script>

<style lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
